<template>
  <div>
    <div id="lovesBgc" />
    <!-- 点击biubiubiu小心心  start-->
    <div
      v-for="(item,index) in loves"
      :key="index"
      :ref="loves[index].count"
      class="img"
      :style="item.top+item.left+item.scale+item.opacity"
      style="float: left;"
    >
      <div
        class="float-left"
        :style="item.childBgc"
      />
      <div
        class="float-right"
        :style="item.childBgc"
      />
      <div
        class="under"
        :style="item.childBgc"
      />
      <div class="text">
        {{ text[loves[index].textIndex] }}
      </div>
    </div>
    <!-- 点击biubiubiu小心心  stop-->

    <!-- 上升气泡   start-->
    <div class="bubbels">
      <div
        v-for="(item,index) in bubbles"
        :key="index"
        class="bubble"
        :style="item.color+item.width+item.height+item.left+
          item.delay+item.duration"
      />
    </div>
    <!-- 上升气泡   stop-->
  </div>
</template>

<script>
  export default {
    name: 'Background',
    data () {
      const text = ['小姐姐~', '我喜欢你~', '我爱你~', '哎呀呀~', 'mua~', '大美女', '想你', '咦~']
      const loves = []
      const bubbles = []
      // count:1,top:'200px',left:'200px',translateY:'-40px',transform:0.5,opacity:0.5
      return {
        text: text, // 小心心上边显示的文字
        textIndex: 0, // 小心心数组下标
        loves: loves, // 小心心样式
        count: 0, // 创建元素个数
        bubbles: bubbles,
      }
    },
    beforeMount () {
      this.createBubble()
    },
    methods: {
      // 创建小心心
      createLoves (event) {
        let x = 0
        let y = 0
        let index = 0// text文本下标
        const color = 'background-color:rgb(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ');'
        index = Math.floor(Math.random() * this.text.length)
        x = event.clientX - 10
        y = event.clientY - 17
        const style = {
          count: 'img' + ++this.count, //
          top: 'top:' + y + 'px;',
          left: 'left:' + x + 'px;',
          opacity: 'opacity:' + 0.5 + ';',
          childBgc: color,
          textIndex: index,
          scale: 'transform: scale(' + 1 + ');',
          // scale : 'left:' + 1
        }
        this.loves.push(style)
        // 在点击鼠标时更新一次泡泡的位置
        this.updateBubble()
      },
      removeSmallHert () {
        // eslint-disable-next-line no-unused-expressions
        this.loves[this.count - 1].opacity = 'opacity:' + 0 + ';'
        this.loves[this.count - 1].scale = 'transform:translateY(' + -80 + 'px) scale(' + 0.5 + ');'
      },
      createBubble () {
        // const left = [10, 20, 35, 50, 55, 65, 75, 80, 70, 85, 77]
        const wh = [40, 20, 50, 80, 35, 45, 25, 80, 15, 50, 77]
        const duration = [8, 5, 10, 7, 6, 8, 7, 6, 9, 5, 8]
        const delay = [0, 1, 1, 0, 0, 0, 2, 1, 0, 3, 2]
        let color = 'rgb(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ')'
        let bubble = {}
        for (var i = 0; i < 11; i++) {
          bubble = {
            left: 'left:' + Math.floor((Math.random() * 80) + 10) + '%;',
            width: 'width:' + wh[i] + 'px;',
            color: 'background-color:' + color + ';',
            height: 'height:' + wh[i] + 'px;',
            delay: 'animation-delay:' + delay[i] + 's;',
            duration: 'animation-duration:' + duration[i] + 's;',
          }
          this.bubbles.push(bubble)
          // 使用随机生成位置，但是显然具有不可控性
          // wh = Math.floor((Math.random()) * 65 + 15);
          // left = Math.floor((Math.random()) * 75 + 15) ;
          // duration = Math.floor(Math.random() * 11) % 6 + 5;
          // delay = Math.floor((Math.random() * 6) % 3 + 1) * Math.floor(Math.random() * 2) % 2;
          color = 'rgb(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ')'
          // this.sleep(1000);
        }
      },
      updateBubble () {
        // 更新泡泡的位置
        const a = Math.floor(Math.random() * 80) + 10
        this.bubbles[Math.floor(Math.random() * 11)].left = 'left:' + a + '%'
      },
    },
  }
</script>

<style>
#lovesBgc{
  position: absolute;
  /* background-color: bisque; */
    background-image: radial-gradient(red, yellow 10%, green 15%);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  top:0;
  left: 0;
  z-index: -1;
}
/* biubiubiu小心心 start */
.img {width: 20px;height: 20px;opacity: 1;position: absolute;z-index: 1000;transition: 2.5s;}
.left,.right {width: 10px;height: 10px;border-radius: 100%;position: absolute;}
.right {right: 0;}
.under {width: 10px;height: 10px;position: absolute;top: 5px;left: 5px;transform: rotate(45deg)}
.text {width: 50px;font-size: 10px;line-height: 1;position: absolute;top: -1em;left: -15px;text-align: center;}

/* biubiubiu小心心 stop */

/* 下边都是泡泡 start */
.bubble{
  position: absolute;
  bottom:0;
  border-radius:50%;
  /*
  opacity 属性设置元素的不透明级别。
  默认值: 1 继承性: no 版本: CSS3
  JavaScript 语法: object.style.opacity=0.5
  */
  opacity: 0.2;
  z-index: 999;
  animation: flying 10s infinite ease-in;
}
.bubble:nth-child(odd){
  animation: flyingOdd 10s infinite ease-in;
}
.bubble:nth-child(even){
  animation: flyingEven 10s infinite ease-in;
}
@keyframes flyingEven{
  0%{
    bottom: 0px;
    transform: translateX(0);
  }
  25%{
    transform: translateX(-200px);
  }
  50%{
    transform: translateX(0);
  }
  100%{
    bottom: 1080px;
    /* transform: rotateX(0); */
    transform: translateX(150px);
  }
}
@keyframes flyingOdd{
  0%{
    bottom: 0px;
    transform: translateX(0);
  }
  25%{
    transform: translateX(50px);
  }
  50%{
    transform: translateX(-50px);
  }
  75%{
    transform: translateX(-80px);
  }
  100%{
    bottom: 1080px;
    /* transform: rotateX(0); */
    transform: translateX(180px);
  }
}
</style>
